Анимация смены текста с помощью GSAP

Результатом будет смена текста при загрузке страницы:

Для начала создадим div и добавим в него текст:

<div class="wrap">
  <div class="animation">
    <h1 id="myText">Web develop</h1>
  </div>
</div>

Далее стилизуем:

body {
    background: #232323;
    font-family: "Arial";
    color: #CAF24E;
}

.wrap {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 100vh;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

h1  {
    font-family: "JetBrainsMono-Medium";
    font-size: 100px;
    font-weight: 400;
}

Подключим библиотеки:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/TextPlugin.min.js'></script>

И напишем скрипт:

gsap.registerPlugin(TextPlugin);

let tl = gsap.timeline({ repeat: -1 }); 

tl.to("#myText", {duration: 2, text: "UI/UX Design", delay: 1, color: "#AD20C6"});
    tl.to("#myText", {duration: 2, text: "Figma to WP", delay: 1, color: "#4E5EF2"});
    tl.to("#myText", {duration: 2, text: "Web develop", delay: 1, color: "#CAF24E"});

Для того чтобы уменьшить или увеличить время самой анимации (время, в течении которого слово меняется) измените параметр duration.

Анимация будет бесконечной.